import React, { useState } from 'react';

interface CommandOutputProps {
  text: string;
}

const CommandOutput: React.FC<CommandOutputProps> = ({ text }) => {
  const [expanded, setExpanded] = useState(false);

  const firstLine = (text || '').split('\n')[0] || '';

  return (
    <div className="command-output">
      <div
        className="command-output-header"
        onClick={() => setExpanded(v => !v)}
      >
        <span className="command-output-title">命令执行结果</span>
        <span className="command-output-toggle">
          {expanded ? '收起' : '查看详情'}
        </span>
      </div>
      {!expanded && firstLine && (
        <div className="command-output-summary">
          {firstLine.length > 120 ? `${firstLine.slice(0, 120)}...` : firstLine}
        </div>
      )}
      {expanded && (
        <pre className="terminal">
          <code>{text}</code>
        </pre>
      )}
    </div>
  );
};

export default CommandOutput;
